<div class="main-container enclosing-container">
  <div class="settings-header">
    <h2 class="settings-title">
      <i class="pi pi-table"></i>
      Library and Shelf View & Sort Preferences
    </h2>
    <p class="settings-description">
      Configure default and per-library/shelf preferences for sorting and view mode (grid or table) in the browser.
    </p>
  </div>

  <div class="settings-content">
    <div class="preferences-section">
      <div class="section-header">
        <h3 class="section-title">
          <i class="pi pi-cog"></i>
          Default Settings
        </h3>
        <p class="section-description">
          Set the default sorting and view preferences that will apply to all libraries and shelves unless overridden.
        </p>
      </div>

      <div class="settings-card">
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">Default Preferences</label>
              <div class="select-group">
                <p-select size="small" [options]="sortOptions" optionLabel="label" optionValue="field"
                          [(ngModel)]="selectedSort" placeholder="Sort" class="select-item"></p-select>
                <p-select size="small" [options]="sortDirectionOptions" [(ngModel)]="selectedSortDir"
                          placeholder="Direction" class="select-item"></p-select>
                <p-select size="small" [options]="viewModeOptions" [(ngModel)]="selectedView"
                          placeholder="View" class="select-item"></p-select>
              </div>
            </div>
            <p class="setting-description">
              Configure the default sorting field, direction, and view mode for all libraries and shelves.
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="preferences-section">
      <div class="section-header">
        <h3 class="section-title">
          <i class="pi pi-list"></i>
          Specific Overrides
        </h3>
        <p class="section-description">
          Create specific sorting and view preferences for individual libraries or shelves that override the default settings.
        </p>
      </div>

      <div class="settings-card">
        <div class="setting-item no-border">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">Override Management</label>
              <p-button label="Add New Override" outlined size="small" (onClick)="addOverride()"
                        severity="info" icon="pi pi-plus" [disabled]="availableLibraries.length === 0"></p-button>
            </div>
            <p class="setting-description">
              Add custom preferences for specific libraries or shelves.
            </p>
          </div>
        </div>

        @if (overrides.length > 0) {
          <div class="overrides-table">
            <p-table [value]="overrides">
              <ng-template pTemplate="header">
                <tr>
                  <th class="min-w-[150px] max-w-[220px]">Type</th>
                  <th class="min-w-[220px] max-w-[280px]">Name</th>
                  <th class="min-w-[190px] max-w-[250px]">Sort By</th>
                  <th class="min-w-[125px]">Sort Dir</th>
                  <th class="min-w-[125px]">View</th>
                  <th class="w-[75px] text-center"></th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-override let-rowIndex="rowIndex">
                <tr>
                  <td>
                    <p-select size="small" [options]="entityTypeOptions" [(ngModel)]="override.entityType"
                              class="w-full" appendTo="body"></p-select>
                  </td>
                  <td>
                    @if (override.entityType) {
                      <p-select size="small"
                                [options]="getAvailableEntities(rowIndex, override.entityType)"
                                [(ngModel)]="override.library"
                                optionLabel="label" optionValue="value"
                                class="w-full" appendTo="body"></p-select>
                    }
                  </td>
                  <td>
                    <p-select size="small" [options]="sortOptions" optionLabel="label" optionValue="field"
                              [(ngModel)]="override.sort" class="w-full" appendTo="body"></p-select>
                  </td>
                  <td>
                    <p-select size="small" [options]="sortDirectionOptions" [(ngModel)]="override.sortDir"
                              class="w-full" appendTo="body"></p-select>
                  </td>
                  <td>
                    <p-select size="small" [options]="viewModeOptions" [(ngModel)]="override.view"
                              class="w-full" appendTo="body"></p-select>
                  </td>
                  <td class="text-center">
                    <p-button icon="pi pi-trash" severity="danger" size="small" [outlined]="true"
                              (onClick)="removeOverride(rowIndex)"></p-button>
                  </td>
                </tr>
              </ng-template>
            </p-table>
          </div>
        }
      </div>
    </div>

    <div class="save-section">
      <p-button label="Save Settings" icon="pi pi-save" severity="success" outlined (onClick)="saveSettings()"></p-button>
    </div>
  </div>
</div>
